<template>
  <div class="sh-tabs-group">
    <div
      class="sh-tabs-group-item"
      v-for="item in tabs"
      :key="item.value"
      :class="getTabItemClass(item.value)"
      @click="tabOnChange(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    default: () => {
      return [];
    },
  },
  modelValue: {
    type: [Number, String],
  },
});
const emits = defineEmits();

const tabOnChange = value => {
  emits('update:modelValue', value);
};

const getTabItemClass = value => {
  return {
    'sh-tabs-group-item-active': props.modelValue === value,
  };
};
</script>
